<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>vue组件的is属性与ref属性</title>
</head>
<body>

  <script src="./js/vue2.js"></script>

  <div id="app">
    <table>
      <tbody>
        <!-- 表格组件中不能添加其他标签，所以 row 标签不能解析在表格里面 -->
        <!-- 此时需要使用 vue 中的 is 属性 -->
        <tr is="row" ref="one" @change="handleChange"></tr>
        <tr is="row" ref="two" @change="handleChange"></tr>
        <tr is="row" ref="three" @change="handleChange"></tr>
      </tbody>
    </table>

    <!-- ref属性 -->
    <div ref="hello" @click="handleClick">hello world</div>

  </div>
</body>
</html>
<script>

  // 创建全局组件
  Vue.component('row', {
    // 模板
    template:`
      <tr @click="handleClick">
        <td>{{content}}</td>
      </tr>
      `,
    // 组件的data必须是一个函数，且返回一个对象
    data: function(){
      return {
        content: 'h5 规范中表格中不能使用其他标签',
        num:0,
      }
    },
    methods: {
      handleClick: function(){
        this.num++;
        // 向父组件发送事件, 带上参数，参数为一个对象
        this.$emit('change', {num:this.num});
      }
    }
  });

  // 根实例
  var vm = new Vue({
    el:'#app',
    data:{

    },
    methods: {
      handleClick: function(){
        // 这样获取的是 dom 
        console.log(this.$refs.hello);
      },
      // 父组件接收事件
      handleChange: function(num){
        // 模板中的ref获取的是一个vue组件实例
        console.log(this.$refs.one)
      }
    }
  });


/**
  1. is 属性
      h5 规范中表格、列表、选择器中不能使用其他额外的标签，故需要使用 is 属性来指定模板

  2. vue 组件中的 data 是一个函数，且返回一个对象

  3. vue 中使用 ref 属性来获取 dom 元素进行操作
      注意如果是模板中的 ref ，则获取的是 vue 引用对象

*/


</script>